<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-white">
    <!-- 顶部操作栏 -->
    <div class="flex justify-between items-center mb-6 p-4">
        <div class="relative">
            <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 border rounded-lg">
            <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
        </div>
        <button onclick="openAddModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
            <i class="fas fa-plus mr-2"></i>添加员工
        </button>
    </div>

    <!-- 员工列表 -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b">
            <h3 class="text-lg font-semibold">员工列表</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">职位</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入职日期</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">EMP001</td>
                        <td class="px-6 py-4 whitespace-nowrap">张三</td>
                        <td class="px-6 py-4 whitespace-nowrap">技术部</td>
                        <td class="px-6 py-4 whitespace-nowrap">前端开发</td>
                        <td class="px-6 py-4 whitespace-nowrap">2023-01-15</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                在职
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button onclick="openEditModal('EMP001')" class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">EMP002</td>
                        <td class="px-6 py-4 whitespace-nowrap">李四</td>
                        <td class="px-6 py-4 whitespace-nowrap">市场部</td>
                        <td class="px-6 py-4 whitespace-nowrap">市场经理</td>
                        <td class="px-6 py-4 whitespace-nowrap">2023-03-20</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                在职
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button onclick="openEditModal('EMP002')" class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    上一页
                </a>
                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    下一页
                </a>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">256</span> 条记录
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                        </a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            25
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加员工模态框 -->
    <div id="addModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
                <div class="flex justify-between items-center p-4 border-b">
                    <h3 class="text-lg font-semibold">添加员工</h3>
                    <button onclick="closeAddModal()" class="text-gray-400 hover:text-gray-500">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-4">
                    <form>
                        <!-- 头像上传 -->
                        <div class="mb-4 flex flex-col items-center">
                            <div class="relative w-32 h-32 mb-4">
                                <div id="avatarPreview" class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
                                    <i class="fas fa-user text-gray-400 text-6xl"></i>
                                </div>
                                <label for="avatar" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
                                    <i class="fas fa-camera text-white text-2xl"></i>
                                </label>
                                <input type="file" id="avatar" accept="image/*" class="hidden" onchange="previewAvatar(this)">
                            </div>
                            <p class="text-sm text-gray-500">点击头像上传新照片</p>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                                姓名
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="请输入姓名">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="department">
                                部门
                            </label>
                            <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="department">
                                <option value="">请选择部门</option>
                                <option value="技术部">技术部</option>
                                <option value="市场部">市场部</option>
                                <option value="人事部">人事部</option>
                                <option value="财务部">财务部</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="position">
                                职位
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="position" type="text" placeholder="请输入职位">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="joinDate">
                                入职日期
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="joinDate" type="date">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="status">
                                状态
                            </label>
                            <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="status">
                                <option value="在职">在职</option>
                                <option value="离职">离职</option>
                                <option value="休假">休假</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="flex justify-end p-4 border-t">
                    <button onclick="closeAddModal()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 mr-2">
                        取消
                    </button>
                    <button onclick="saveEmployee()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑员工模态框 -->
    <div id="editModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
                <div class="flex justify-between items-center p-4 border-b">
                    <h3 class="text-lg font-semibold">编辑员工</h3>
                    <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-500">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-4">
                    <form>
                        <!-- 头像上传 -->
                        <div class="mb-4 flex flex-col items-center">
                            <div class="relative w-32 h-32 mb-4">
                                <div id="editAvatarPreview" class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
                                    <i class="fas fa-user text-gray-400 text-6xl"></i>
                                </div>
                                <label for="editAvatar" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
                                    <i class="fas fa-camera text-white text-2xl"></i>
                                </label>
                                <input type="file" id="editAvatar" accept="image/*" class="hidden" onchange="previewEditAvatar(this)">
                            </div>
                            <p class="text-sm text-gray-500">点击头像上传新照片</p>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="editName">
                                姓名
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="editName" type="text">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="editDepartment">
                                部门
                            </label>
                            <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="editDepartment">
                                <option value="技术部">技术部</option>
                                <option value="市场部">市场部</option>
                                <option value="人事部">人事部</option>
                                <option value="财务部">财务部</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="editPosition">
                                职位
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="editPosition" type="text">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="editJoinDate">
                                入职日期
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="editJoinDate" type="date">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="editStatus">
                                状态
                            </label>
                            <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="editStatus">
                                <option value="在职">在职</option>
                                <option value="离职">离职</option>
                                <option value="休假">休假</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="flex justify-end p-4 border-t">
                    <button onclick="closeEditModal()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 mr-2">
                        取消
                    </button>
                    <button onclick="updateEmployee()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加员工模态框相关函数
        function openAddModal() {
            document.getElementById('addModal').classList.remove('hidden');
            // 重置头像预览
            const avatarPreview = document.getElementById('avatarPreview');
            avatarPreview.innerHTML = '<i class="fas fa-user text-gray-400 text-6xl"></i>';
            avatarPreview.classList.add('bg-gray-200', 'flex', 'items-center', 'justify-center');
        }

        function closeAddModal() {
            document.getElementById('addModal').classList.add('hidden');
        }

        function saveEmployee() {
            // 这里添加保存员工的逻辑
            closeAddModal();
        }

        // 编辑员工模态框相关函数
        function openEditModal(employeeId) {
            // 这里添加获取员工信息的逻辑
            document.getElementById('editModal').classList.remove('hidden');
            // 重置头像预览
            const editAvatarPreview = document.getElementById('editAvatarPreview');
            editAvatarPreview.innerHTML = '<i class="fas fa-user text-gray-400 text-6xl"></i>';
            editAvatarPreview.classList.add('bg-gray-200', 'flex', 'items-center', 'justify-center');
        }

        function closeEditModal() {
            document.getElementById('editModal').classList.add('hidden');
        }

        function updateEmployee() {
            // 这里添加更新员工的逻辑
            closeEditModal();
        }

        // 头像预览函数
        function previewAvatar(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const avatarPreview = document.getElementById('avatarPreview');
                    avatarPreview.innerHTML = `<img src="${e.target.result}" alt="头像预览" class="w-full h-full rounded-full object-cover">`;
                    avatarPreview.classList.remove('bg-gray-200', 'flex', 'items-center', 'justify-center');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function previewEditAvatar(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const editAvatarPreview = document.getElementById('editAvatarPreview');
                    editAvatarPreview.innerHTML = `<img src="${e.target.result}" alt="头像预览" class="w-full h-full rounded-full object-cover">`;
                    editAvatarPreview.classList.remove('bg-gray-200', 'flex', 'items-center', 'justify-center');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>
</html> 